﻿

<div ng-switch on="sourceData.Input" class="form-group">  
    <div class="col-md-6">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <!--LABEL-->
                    <label class="text-primary">{{ sourceData.Label  }} </label>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <!--QUESTION-->
                    <label class="text-default">{{ sourceData.Question  }} </label>
                </div>
            </div>
    </div>     
    <!---SWITCH START ON QUESTION INPUT -->
    <div class="col-md-6">

        <!--TEXT supported text input types : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.-->
        <div ng-switch-when="text">         
            <input type="{{sourceData.InputType}}"
                   class="form-control"
                   name="{{ sourceData.Question }} "
                   placeholder="{{sourceData.Placeholder}}"
                   value="{{ sourceData.Value }}"
                   tooltip="On the Right!"
                   tooltip-placement="right" />                
        </div> 
        
        <!--ADDRESS-->
        <div ng-switch-when="address">
            <input type="text"
                   ng-model="asyncSelected"
                   placeholder="Locations loaded via $http"
                   typeahead="address for address in getLocation($viewValue)"
                   typeahead-loading="loadingLocations"
                   class="form-control"
                   tooltip="{{sourceData.tooltip}}"
                   tooltip-trigger="focus"
                   tooltip-placement="{{sourceData.TooltipPlacement}}" />
                  <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>  
        </div>

        <!--STATE-->
        <div ng-switch-when="state">               
               <!-----Html      <script type="text/ng-template" id="customTemplate.html">
                        <a>
                            <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
                            <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
                        </a>
                    </script> Template with the image source-->
            <input type="text" 
                   ng-model="selected" 
                   placeholder="state"  
                   typeahead="state for state in states | filter:$viewValue | limitTo:8" 
                   class="form-control">
        </div>

        <!--COUNTRY-->
        <div ng-switch-when="country">
            <input type="text" 
                   ng-model="Country" 
                   placeholder="country" 
                   typeahead="contry for contry in  contries | filter:$viewValue | limitTo:8" 
                   class="form-control">                      
        </div>
            <!--TEXT AREA-->
            <div ng-switch-when="textarea">
                <textarea class="form-control" 
                          name="{{ sourceData.Question }} " 
                          placeholder="{{ sourceData.Placeholder }}" 
                          value="{{ sourceData.Value }}"></textarea>
            </div>

            <!--SELECT LIST-->
            <div ng-switch-when="select">
                <select name="{{ sourceData.Question}} " class="form-control">
                    <option ng-repeat=" opt in sourceData.option" value="{{opt}}">{{opt}}</option>
                </select>
            </div>

            <!--RADIO LIST-->
            <div ng-switch-when="radio">
                <div ng-repeat=" val in sourceData.Value" class="radio-inline">
                    <label>
                        <input type="radio"
                               name="{{ sourceData.Question }} " 
                               value="{{val}}" />
                        {{val}}
                    </label>
                </div>
            </div>

            <!--CHEKBOX LIST-->
            <div ng-switch-when="checkbox">
                <div ng-repeat=" val in sourceData.Value" class="checkbox-inline">
                    <label>
                        <input type="checkbox" 
                               name="{{ sourceData.Question }} " 
                               value="{{val}}" />
                        {{val}}
                    </label>
                </div>
            </div>

            <!--DEFAULT ERROR  CONTROL WITH NO TYPE-->
            <div ng-switch-default>
                <label class="label label-danger form-control">The question <span class="label label-info"> "  
                    {{sourceData.Question }}" </span><br/>  has not input type such as (input type: text, texarea..etc)</label>
            </div>

        </div>
</div>